<script setup lang="ts">
import {onMounted, ref, watch} from "vue"
import {value, toggle} from './dark.ts';
import MoonView from "@/theme/MoonView.vue";
import SunnyView from "@/theme/SunnyView.vue";

watch(value, (value) => {
  dark.value = value;
})
const dark = ref(false);
const change = () => {
  toggle();
}
onMounted(() => {
  dark.value = value.value;
})
</script>

<template>
  <!--  <div class="svg-icon">-->
  <!--    <el-icon :size="20" v-if="value"><Moon /></el-icon>-->
  <!--    <el-icon v-else :size="20"><Sunny /></el-icon>-->
  <el-switch
      v-model="dark"
      size="default"
      style="--el-switch-on-color: black;--el-switch-border-color:var(--el-border-color)"
      @change="change"
      :active-action-icon="MoonView"
      :inactive-action-icon="SunnyView"
  ></el-switch>
  <!--  </div>-->
</template>

<style scoped>
.svg-icon {
  display: flex;
  justify-items: center;
  align-items: center;
  cursor: pointer;
}
</style>